<template>
    <div>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="12">
                <div style="margin: 15px 0;">
                    <!--<el-radio-group v-model="radio">-->
                    <!--<el-radio-button label="标准分词"></el-radio-button>-->
                    <!--<el-radio-button label="NLP"></el-radio-button>-->
                    <!--<el-radio-button label="N-最短路径分词"></el-radio-button>-->
                    <!--<el-radio-button label="最短路径分词"></el-radio-button>-->
                    <!--<el-radio-button label="CRF分词"></el-radio-button>-->
                    <!--<el-radio-button label="极速分词"></el-radio-button>-->
                    <!--</el-radio-group>-->
                    <el-checkbox-group v-model="checkboxValue">
                        <el-checkbox-button v-for="type in typesMap" :label="type.label" :key="type.value">{{type.label}}</el-checkbox-button>
                    </el-checkbox-group>
                </div>
                <el-input
                        type="textarea"
                        placeholder="请输入要分析内容"
                        v-model="textarea"
                        :autosize="{ minRows: 4}"
                        v-if="textShow">
                </el-input>
                <template v-if="!textShow">
                    <el-alert
                            title="点击文本即可再次编辑"
                            type="info"
                            show-icon>
                    </el-alert>
                    <div v-html="temp" v-model="temp" @click="textShow = !textShow"></div>
                </template>
            </el-col>
            <div style="margin: 0 5px;"></div>
            <el-col :span="12">
                <div style="margin: 15px 0 17px 0;">
                    <el-button type="primary" icon="edit" @click="getAnalysis">分析</el-button>
                </div>
                <el-table
                        :data="this.$store.getters.refactorAnalyze"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="_algorithm"
                            label="分词算法">
                    </el-table-column>
                    <el-table-column
                            prop="_sensitives"
                            label="是否涉敏">
                    </el-table-column>
                    <el-table-column
                            prop="_emotions"
                            label="情感分析">
                    </el-table-column>
                    <el-table-column
                            prop="_classifications"
                            label="分类结果">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="70">
                        <template scope="scope">
                            <el-button @click="handleClick(scope.row._algorithm)" type="text" size="small">详细

                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <transition name="el-zoom-in-top">
                    <div v-if="show" style="margin-top: 20px">
                        <vue-echarts :props="bar"></vue-echarts>
                        <vue-echarts :props="pie"
                                     v-if="this.getCurrentAnalyze[0]._classifications !== '暂无此类标签'"></vue-echarts>
                        <template>
                            <h3 style="color: #1f2d3d">涉敏分析</h3>
                            <el-table
                                    :data="this.getCurrentAnalyze ? this.getCurrentAnalyze[0].sensitives[0].items: []"
                                    style="width: 100%"
                                    empty-text="无涉敏词语">
                                <el-table-column
                                        prop="word"
                                        label="涉敏词语">
                                </el-table-column>
                                <el-table-column
                                        prop="count"
                                        label="涉敏次数">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </transition>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import VueEcharts from './echarts/VueEcharts.vue'
    import {Loading, Message} from 'element-ui';

    export default {
        data() {
            return {
                textarea: '',
                temp: '',
                checkboxValue: ['标准分词'],
                typesMap: [
                    {label: '标准分词', value: 'stardard'},
                    {label: 'NLP', value: 'nlp'},
                    {label: '索引分词', value: 'index'},
//                    {label: 'N-最短路径分词', value: 'nshort'},
                    {label: '最短路径分词', value: 'shortest'},
                    {label: 'CRF分词', value: 'crf'},
                    {label: '极速分词', value: 'speed'}],
                show: false,
                textShow: true,
            }
        },
        computed: {
            bar: function () {
                return {
                    id: 'bar',
                    style: {
                        width: '100%',
                        height: '200px'
                    }
                    ,
                    option: {
                        title: {
                            text: '情感分析'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['正面', '负面']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        yAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                data: [this.$store.state.nlp.currentAnalyze]
                            }
                        ],
                        series: [{
                            name: '正面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true
                                }
                            },
                            data: [this.getCurrentAnalyze ? this.getCurrentAnalyze[0].emotions[0].item.positiveScore : 0]
                        }, {
                            name: '负面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'left'
                                }
                            },
                            data: [this.getCurrentAnalyze ? this.getCurrentAnalyze[0].emotions[0].item.negativeScore : 0]
                        }
                        ]
                    }
                }
            },
            pie: function () {
                return {
                    id: 'pie',
                    style: {
                        width: '100%',
                        height: '200px'
                    }
                    ,
                    option: {
                        title: {
                            text: '类型分析'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },

                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: this.pieName,
                            top: 30,
                        },
                        series: [
                            {
                                name: '分类',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: this.pieData
                            }
                        ]
                    }
                }
            },
            pieData: function () {
                const group = [];
                if (this.getCurrentAnalyze) {
                    this.getCurrentAnalyze[0].classifications[0].items.map(obj => {
                        group.push({name: obj.category, value: obj.score})
                    })
                }
                return group
            },
            pieName: function () {
                const group = [];
                if (this.getCurrentAnalyze) {
                    this.getCurrentAnalyze[0].classifications[0].items.map(obj => {
                        group.push(obj.category)
                    })
                }
                return group
            },
            getCurrentAnalyze: function () {
                return this.$store.state.nlp.analyze.items.filter(items => this.typesMap.find(obj => obj.value === items.algorithm).label === this.$store.state.nlp.currentAnalyze);
            }
        },
        components: {VueEcharts},
        methods: {
            getAnalysis(){
                if (this.textarea !== '') {
                    this.$store.dispatch('analyze', {
                        algorithms: this.checkboxValue.map(obj => {
                            return this.typesMap.find(item => item.label === obj).value
                        }),
                        sensitives: ['stardard'],
                        classifications: ['stardard'],
                        emotions: ['stardard'],
                        content: this.textarea
                    });
                } else Message.warning({message: '请输入需要分析的内容', duration: 1000})
            },
            tableRowClassName(row, index) {
                if (this.$store.state.nlp.currentAnalyze && row._algorithm === this.$store.state.nlp.currentAnalyze) {
                    return 'info-row';
                }
                else return '';
            },
            handleClick(type){
                let loadingInstance = null;
                if (type !== this.$store.state.nlp.currentAnalyze) {
                    loadingInstance = Loading.service({text: '正在分析中'});
                    this.show = false;
                    this.$store.dispatch('currentAnalyze', type)
                        .then(() => {
                            const ligntWord = this.getCurrentAnalyze ? this.getCurrentAnalyze[0].sensitives[0].items : [];
                            this.temp = this.textarea;
                            if (ligntWord.length !== 0) {
                                ligntWord.map(obj => (
                                    this.light(obj.word, 'hl')
                                ))
                            }
                            this.show = true;
                            this.textShow = false;
                            loadingInstance.close();
                        });
                }
            },
            light(keyword, hightLightClass){
                this.temp = this.temp.split(keyword).join(`<span class="${hightLightClass}">${keyword}</span>`);
            }
            ,
        },
    }
</script>

<style lang="stylus">
    .el-table .info-row
        background: #c9e5f5

    .el-table .positive-row
        background: #e2f0e4

    .el-table__empty-block
        min-height: 56px

    .transition-box
        margin-bottom: 10px
        width: 100%
        height: 100px
        border-radius: 4px
        background-color: #20A0FF
        text-align: center
        color: #fff
        padding: 40px 20px
        box-sizing: border-box
        margin-right: 20px

    .hl {
        background-color: yellow;
    }
</style>